/* eslint-disable react-hooks/exhaustive-deps */
import { GetServerSideProps } from "next";
import * as userService from "../../services/user.service";
import { IArticle, ILike, IUser } from "../../types";
import * as React from "react";
import { useRouter } from "next/router";
import toast from "../../components/Toast";
import Header from "../../components/header";
import styles from "./user.module.scss";
import { Button, Menu } from "antd";
import ArticleItem from "../../components/articleItem";

interface Props {
  user: IUser;
  me: IUser;
  articles: IArticle[];
  likes: ILike[];
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const result = await userService.getInfo(ctx.query.id as string);
  const user = await userService.userInfo(ctx.req.cookies.token);
  const articles = await userService.articles(ctx.query.id as string);
  const likes = await userService.likes(ctx.query.id as string);
  if (user.stat === "OK") {
    return {
      props: {
        user: result.data,
        me: user.data,
        articles: articles.rows,
        likes: likes.rows,
      },
    };
  }
  return {
    props: {
      user: result.data,
      me: null,
      articles: articles.rows,
      likes: likes.rows,
    },
  };
};

export default function User(props: Props) {
  const [isFollow, setFollow] = React.useState<boolean>(false);
  const [area, setArea] = React.useState<string>("articles");
  const [rows, setRows] = React.useState<IArticle[]>(props.articles);
  const [rows2, setRows2] = React.useState<ILike[]>(props.likes);
  const router = useRouter();
  const getData = React.useCallback(async () => {
    if (props.me !== null) {
      const res = await userService.findFollow(props.user._id);
      setFollow(res.result);
    }
  }, [props.me, props.user._id]);

  React.useEffect(() => {
    getData();
  }, [getData]);

  //关注按钮
  const subscribe = async () => {
    if (props.me === null) {
      toast("请登录");
      router.push("/login");
    } else if (props.me._id === props.user._id) {
      toast("不能关注自己");
    } else {
      await userService.follow(isFollow, props.user._id);
      setFollow(!isFollow);
      toast("操作完成");
    }
  };

  return (
    <div>
      <Header user={props.me} />
      <div className={styles.main}>
        <div className={styles.left}>
          <div className={styles.avatar}>
            <div
              style={{
                height: "100px",
                width: "100px",
                marginTop: "30px",
                backgroundImage: `url(/api/article/download/${props.user.avatar})`,
                backgroundSize: "cover",
              }}
            ></div>
          </div>
          <div className={styles.nickname}>昵称：{props.user.nickname}</div>
          <div className={styles.intro}>
            个人简介：{props.user.introduction}
          </div>
          <Button className={styles.btn} size="large" onClick={subscribe}>
            {isFollow ? "已关注" : "关注"}
          </Button>
          <Menu
            className={styles.menu}
            selectedKeys={[area]}
            onClick={(e) => setArea(e.key)}
            mode="vertical"
          >
            <Menu.Item key="articles">他的文章</Menu.Item>
            <Menu.Item key="follows">他的点赞</Menu.Item>
          </Menu>
        </div>

        <div className={area === "articles" ? styles.right : styles.none}>
          {rows.map((item, index) => {
            return <ArticleItem item={item} key={index} />;
          })}
        </div>

        <div className={area === "articles" ? styles.none : styles.right2}>
          {rows2.map((item, index) => {
            return (
              <div key={index} className={styles.item}>
                <div className={styles.action}>
                  {props.user.nickname} 点赞了文章《{item.title}》
                </div>

                <div className={styles.time}>
                  {new Date(item.time).toLocaleDateString() +
                    " " +
                    new Date(item.time).toLocaleTimeString()}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
